<template>
  <div>
    <!--这里是导航栏-->
    <van-row>
      <van-nav-bar
          title="标题"
          left-text="返回"
          right-text="按钮"
          left-arrow
          @click-left="onClickLeft"
          @click-right="onClickRight"
      />
    </van-row>

    <van-row>
      <!--这里是左侧菜单栏-->
      <van-col span="4">
        <van-sidebar v-model="activeKey">
          <van-sidebar-item title="JIXIANG" />
          <van-sidebar-item title="JINGJING" />
          <van-sidebar-item title="DAPANGXIE" />
        </van-sidebar>
      </van-col>
      <!--这里是轮播图-->
      <van-col span="16" offset="4">
        <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
          <van-swipe-item>1</van-swipe-item>
          <van-swipe-item>2</van-swipe-item>
          <van-swipe-item>3</van-swipe-item>
          <van-swipe-item>4</van-swipe-item>
        </van-swipe>
      </van-col>
    </van-row>

    <van-row>
      <van-tabs v-model="active">
        <van-tab title="标签 1">内容 1</van-tab>
        <van-tab title="标签 2">内容 2</van-tab>
        <van-tab title="标签 3">内容 3</van-tab>
        <van-tab title="标签 4">内容 4</van-tab>
      </van-tabs>
    </van-row>
  </div>
</template>

<script>

//import { Toast } from 'vant';

export default {
  name: "index",
  data() {
    return {
      activeKey: 1,
      active: 1
    };
  },
  methods: {
    onClickLeft() {
      this.$toast('返回');
    },
    onClickRight() {
      this.$toast('按钮');
    },
  }
}
</script>

<style scoped>
.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 20px;
  line-height: 150px;
  text-align: center;
  background-color: #39a9ed;
}
</style>
